<script setup>
import { ref, computed, onMounted } from 'vue'

const serviceList = ref([
  {
    id: 1,
    name: '北京中医医院',
    address: '北京市东城区美术馆后街23号',
    phone: '010-12345678',
    distance: '2.5km',
    services: ['中医内科', '中医外科', '针灸推拿', '中药房'],
    latitude: 39.9219,
    longitude: 116.4080
  },
  {
    id: 2,
    name: '同仁堂中医门诊',
    address: '北京市崇文门外大街44号',
    phone: '010-87654321',
    distance: '3.8km',
    services: ['中医内科', '中医妇科', '中药房'],
    latitude: 39.9002,
    longitude: 116.4179
  },
  {
    id: 3,
    name: '广安门中医院',
    address: '北京市西城区广安门内大街5号',
    phone: '010-13579246',
    distance: '5.2km',
    services: ['中医内科', '中医外科', '中医儿科', '针灸推拿', '中药房'],
    latitude: 39.8913,
    longitude: 116.3534
  },
  {
    id: 4,
    name: '和平里社区卫生服务中心',
    address: '北京市东城区和平里中街18号',
    phone: '010-24681357',
    distance: '1.5km',
    services: ['中医内科', '针灸推拿'],
    latitude: 39.9647,
    longitude: 116.4177
  }
])

const searchKeyword = ref('')
const showMap = ref(false)
const mapContext = ref(null)
const selectedService = ref(null)

const filteredServiceList = computed(() => {
  if (!searchKeyword.value) return serviceList.value
  
  return serviceList.value.filter(item => {
    return item.name.includes(searchKeyword.value) || 
           item.address.includes(searchKeyword.value) ||
           item.services.some(service => service.includes(searchKeyword.value))
  })
})

onMounted(() => {
  // 获取当前位置
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      console.log('当前位置：', res.latitude, res.longitude)
    },
    fail: (err) => {
      console.error('获取位置失败：', err)
      uni.showToast({
        title: '获取位置信息失败',
        icon: 'none'
      })
    }
  })
})

function callService(phone) {
  uni.makePhoneCall({
    phoneNumber: phone,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      })
    }
  })
}

function navigateToMap(address) {
  // 调用系统地图应用导航
  uni.openLocation({
    latitude: selectedService.value.latitude,
    longitude: selectedService.value.longitude,
    name: selectedService.value.name,
    address: selectedService.value.address,
    success: () => {
      console.log('打开地图成功')
    },
    fail: (err) => {
      console.error('打开地图失败：', err)
      uni.showToast({
        title: '打开地图失败',
        icon: 'none'
      })
    }
  })
}

function toggleMap() {
  showMap.value = !showMap.value
  
  if (showMap.value) {
    // 延迟获取地图上下文，确保地图组件已经渲染
    setTimeout(() => {
      mapContext.value = uni.createMapContext('serviceMap')
    }, 300)
  }
}

function viewServiceOnMap(service) {
  selectedService.value = service
  showMap.value = true
  
  // 延迟获取地图上下文，确保地图组件已经渲染
  setTimeout(() => {
    mapContext.value = uni.createMapContext('serviceMap')
    // 将地图中心移动到选中的服务网点
    mapContext.value.moveToLocation({
      latitude: service.latitude,
      longitude: service.longitude
    })
  }, 300)
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">服务网点</view>
      <view class="subtitle">查找附近的中医服务网点</view>
    </view>
    
    <view class="map-toggle">
      <button class="toggle-btn" @click="toggleMap">{{ showMap ? '列表视图' : '地图视图' }}</button>
    </view>
    
    <view v-if="showMap" class="map-container">
      <map 
        id="serviceMap"
        class="service-map"
        :latitude="39.9087"
        :longitude="116.3975"
        :markers="filteredServiceList.map(item => ({
          id: item.id,
          latitude: item.latitude,
          longitude: item.longitude,
          title: item.name,
          iconPath: '/static/logo.png',
          width: 30,
          height: 30
        }))"
        :scale="12"
        show-location
      ></map>
      
      <view v-if="selectedService" class="map-info-card">
        <view class="service-name">{{ selectedService.name }}</view>
        <view class="service-address">{{ selectedService.address }}</view>
        <view class="map-card-actions">
          <button class="map-action-btn call-btn" @click="callService(selectedService.phone)">拨打电话</button>
          <button class="map-action-btn nav-btn" @click="navigateToMap(selectedService.address)">导航前往</button>
        </view>
      </view>
    </view>
    
    <view v-else>
      <view class="search-box">
        <input 
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索医院名称、地址或服务类型"
        />
      </view>
      
      <view class="service-list">
        <view 
          v-for="service in filteredServiceList" 
          :key="service.id"
          class="service-item"
        >
          <view class="service-header">
            <view class="service-name">{{ service.name }}</view>
            <view class="service-distance">{{ service.distance }}</view>
          </view>
          
          <view class="service-address">
            <text>地址：{{ service.address }}</text>
            <text class="navigate-btn" @click="viewServiceOnMap(service)">查看地图</text>
          </view>
          
          <view class="service-phone">
            <text>电话：{{ service.phone }}</text>
            <text class="call-btn" @click="callService(service.phone)">拨打</text>
          </view>
          
          <view class="service-types">
            <text class="service-type-label">服务项目：</text>
            <view class="service-type-list">
              <text 
                v-for="(type, index) in service.services" 
                :key="index"
                class="service-type-item"
              >
                {{ type }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.map-toggle {
  margin-bottom: 20rpx;
  
  .toggle-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #1890ff;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}

.map-container {
  position: relative;
  width: 100%;
  height: 800rpx;
  margin-bottom: 30rpx;
  
  .service-map {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
  }
  
  .map-info-card {
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
    right: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    
    .service-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .service-address {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .map-card-actions {
      display: flex;
      justify-content: space-between;
      
      .map-action-btn {
        width: 48%;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 35rpx;
        font-size: 28rpx;
        
        &.call-btn {
          background-color: #f0f0f0;
          color: #666;
        }
        
        &.nav-btn {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
  }
}

.search-box {
  margin-bottom: 30rpx;
  
  .search-input {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
}

.service-list {
  .service-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .service-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .service-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .service-distance {
        font-size: 28rpx;
        color: #1890ff;
      }
    }
    
    .service-address, .service-phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      font-size: 28rpx;
      color: #666;
      
      .navigate-btn, .call-btn {
        color: #1890ff;
      }
    }
    
    .service-types {
      margin-top: 20rpx;
      
      .service-type-label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .service-type-list {
        display: flex;
        flex-wrap: wrap;
        
        .service-type-item {
          background-color: #e6f7ff;
          color: #1890ff;
          font-size: 24rpx;
          padding: 6rpx 20rpx;
          border-radius: 20rpx;
          margin-right: 15rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>